<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="utf-8" />
<title>Menu</title>
<link th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{/js/jquery-3.2.1.js}"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link th:href="@{/css/dcstyle.css}" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script>
<!---->
<link th:href="@{/css/styles.css}" rel="stylesheet" />
<!-- animation-effect -->
<link th:href="@{/css/animate.min.css}" rel="stylesheet" />
<script th:src="@{js/wow.min.js}"></script>
<script>
	new WOW().init();
</script>
<!-- //animation-effect -->
</head>
<body>
	<div class="header head">
		<div class="container">
			<div class="logo animated wow pulse" data-wow-duration="1000ms" data-wow-delay="500ms">
				<h1>
					<a href="#"><span>C</span><img th:src="@{/img/dc/oo.png}" alt="" /><img
						th:src="@{/img/dc/oo.png}" alt="" />kery</a>
				</h1>
			</div>
			<div th:if="${session.user != null}" class="nav-icon">
				<h4 class="text-info" th:text="${session.user.name}"></h4>
			</div>
			<div class="nav-icon">
				<a href="#" class="navicon"></a>
				<div class="toggle">
					<ul class="toggle-menu">
						<li th:if="${session.user} == null"><a th:href="@{/login}">登录</a></li>
						<li th:if="${session.user == null}"><a th:href="@{/register}">注册</a></li>
						<li th:if="${session.user} != null"><a th:href="@{/logout}">注销</a></li>
					</ul>
				</div>
				<script>
					$('.navicon').on('click', function(e) {
						e.preventDefault();
						$(this).toggleClass('navicon--active');
						$('.toggle').toggleClass('toggle--active');
					});
				</script>
			</div>
			<div class="clearfix"></div>
		</div>
		<!-- start search-->
	</div>
	<!--content-->
	<div class="menu">
		<div class="container">
			<div class="menu-top">
				<div class="col-md-12 menu-left animated wow fadeInLeft" data-wow-duration="1000ms"
					data-wow-delay="500ms">
					<div th:each="table : ${tables}" class="col-md-4 menu-bottom1">
					<div class="btm-right">
						<a th:href="@{/table/tableFood/{id}(id=${table.id})}">
							<img th:src="@{/img/table.jpg}" alt="餐桌" class="img-responsive" />
							<div class="captn">
								<h4 th:text="${table.tableName}"></h4>
							</div>
						</a>
					</div>
				</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="menu-bottom animated wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="500ms">
				
				<div class="clearfix"></div>
			</div>
			<div class="menu-bottom animated wow fadeInRight" data-wow-duration="1000ms"
				data-wow-delay="500ms">
				<div class="col-md-4 menu-bottom1">
					<div class="btm-right">
						<a href="#"> <img th:src="@{/img/dc/me3.jpg}" alt="" class="img-responsive" />
							<div class="captn">
								<h4>Lorem</h4>
								<p>$20.00</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 menu-bottom1">
					<div class="btm-right">
						<a href="#"> <img th:src="@{/img/dc/me4.jpg}" alt="" class="img-responsive" />
							<div class="captn">
								<h4>Lorem</h4>
								<p>$20.00</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 menu-bottom1">
					<div class="btm-right">
						<a href="#"> <img th:src="@{/img/dc/me5.jpg}" alt="" class="img-responsive" />
							<div class="captn">
								<h4>Lorem</h4>
								<p>$20.00</p>
							</div>
						</a>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="menu-bottom animated wow fadeInDown" data-wow-duration="1000ms"
				data-wow-delay="500ms">
				<div class="col-md-4 menu-bottom1">
					<div class="btm-right">
						<a href="#"> <img th:src="@{/img/dc/me6.jpg}" alt="" class="img-responsive" />
							<div class="captn">
								<h4>Lorem</h4>
								<p>$20.00</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 menu-bottom1">
					<div class="btm-right">
						<a href="#"> <img th:src="@{/img/dc/me7.jpg}" alt="" class="img-responsive" />
							<div class="captn">
								<h4>Lorem</h4>
								<p>$20.00</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 menu-bottom1">
					<div class="btm-right">
						<a href="#"> <img th:src="@{/img/dc/me8.jpg}" alt="" class="img-responsive" />
							<div class="captn">
								<h4>Lorem</h4>
								<p>$20.00</p>
							</div>
						</a>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-head">
				<div class="col-md-8 footer-top animated wow fadeInRight" data-wow-duration="1000ms"
					data-wow-delay="500ms">
					<ul class=" in">
						<li><a href="#">Home</a></li>
						<li><a href="#">Menu</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Events</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
					<span>There are many variations of passages</span>
				</div>
				<div class="col-md-4 footer-bottom  animated wow fadeInLeft" data-wow-duration="1000ms"
					data-wow-delay="500ms">
					<h2>Follow Us</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
						incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
					<ul class="social-ic">
						<li><a href="#"><i></i></a></li>
						<li><a href="#"><i class="ic"></i></a></li>
						<li><a href="#"><i class="ic1"></i></a></li>
						<li><a href="#"><i class="ic2"></i></a></li>
						<li><a href="#"><i class="ic3"></i></a></li>
					</ul>

				</div>
				<div class="clearfix"></div>

			</div>
			<p class="footer-class animated wow bounce" data-wow-duration="1000ms" data-wow-delay="500ms">
				Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="#">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
			</p>
		</div>
	</div>
	<!--//footer-->

</body>
</html>